<template>
  <div class="home">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <van-search
        v-model="searchValue"
        placeholder="搜索商品"
        @search="onSearch"
        @click="onSearch"
        readonly
      />
    </div>

    <!-- 测试导航 -->
    <div class="test-nav">
      <van-button type="primary" @click="$router.push('/tabs')" style="margin-bottom: 12px;">
        查看 Tabs 组件演示
      </van-button>
      <van-button type="success" @click="$router.push('/waterfall')">
        查看瀑布流商品列表
      </van-button>
    </div>

    <!-- 轮播图 -->
    <van-swipe class="banner" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(banner, index) in banners" :key="index">
        <img :src="banner" alt="轮播图" class="banner-img" />
      </van-swipe-item>
    </van-swipe>

    <!-- 分类导航 -->
    <div class="category-nav">
      <van-grid :column-num="4" :border="false" :gutter="10">
        <van-grid-item
          v-for="category in categories.slice(0, 8)"
          :key="category.id"
          @click="goToCategory(category.id)"
        >
          <van-icon :name="category.icon" size="24" color="#1989fa" />
          <span class="category-name">{{ category.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 热销商品 -->
    <div class="section">
      <div class="section-title">
        <h3>热销推荐</h3>
        <span class="more" @click="goToCategory()">更多 ></span>
      </div>
      <div class="product-grid">
        <!-- 骨架屏 -->
        <ProductCard
          v-for="n in 4"
          v-show="loading"
          :key="`hot-skeleton-${n}`"
          :product="skeletonProduct"
          :loading="true"
        />
        
        <!-- 实际商品 -->
        <ProductCard
          v-for="product in hotProducts"
          v-show="!loading"
          :key="product.id"
          :product="product"
          :loading="false"
          @click="goToProduct"
        />
      </div>
    </div>

    <!-- 新品推荐 -->
    <div class="section">
      <div class="section-title">
        <h3>新品上市</h3>
        <span class="more" @click="goToCategory()">更多 ></span>
      </div>
      <div class="product-grid">
        <!-- 骨架屏 -->
        <ProductCard
          v-for="n in 4"
          v-show="loading"
          :key="`new-skeleton-${n}`"
          :product="skeletonProduct"
          :loading="true"
        />
        
        <!-- 实际商品 -->
        <ProductCard
          v-for="product in newProducts"
          v-show="!loading"
          :key="product.id"
          :product="product"
          :loading="false"
          @click="goToProduct"
        />
      </div>
    </div>

    <!-- 悬浮机器人图标 -->
    <FloatingBot @click="handleBotClick" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useProductStore } from '@/stores/product'
import { showToast } from 'vant'
import ProductCard from '@/components/ProductCard.vue'
import FloatingBot from '@/components/FloatingBot.vue'

const router = useRouter()
const productStore = useProductStore()

const searchValue = ref('')
const loading = ref(true)

// 骨架屏配置
const skeletonProduct = ref({
  id: 0,
  title: '',
  price: 0,
  image: '',
  tag: ''
})

// 从store获取数据
const { banners, categories, hotProducts, newProducts } = productStore

// 搜索功能
const onSearch = (value: string) => {
  if (value.trim()) {
    showToast(`搜索: ${value}`)
    // 这里可以跳转到搜索结果页面
  }
}

// 跳转到分类页面
const goToCategory = (categoryId?: number) => {
  router.push({
    name: 'Category',
    query: categoryId ? { categoryId } : {}
  })
}

// 跳转到商品详情
const goToProduct = (productId: number) => {
  router.push({
    name: 'ProductDetail',
    params: { id: productId }
  })
}

// 处理机器人点击
const handleBotClick = () => {
  router.push({ name: 'AiChat' })
}

// 模拟数据加载
onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 5000) // 1.2秒后隐藏骨架屏
})
</script>

<style scoped>
.home {
  padding-bottom: 60px;
}

.search-bar {
  padding: 10px 16px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.test-nav {
  padding: 10px 16px;
  background: #fff;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.banner {
  height: 180px;
  margin-bottom: 16px;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-nav {
  padding: 16px;
  background: white;
  margin-bottom: 10px;
}

.category-name {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.section {
  background: white;
  margin-bottom: 10px;
  padding: 16px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.more {
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* 商品卡片样式已移至 ProductCard 组件 */
</style>